<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-main>
      <!-- 轮播图 -->
      <el-carousel height="500px" class="carousel">
        <el-carousel-item>
          <img src="@/assets/bodaxiaoqunanmen.jpg" alt="轮播图" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/honghuhuxinting.jpg" alt="轮播图" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/tushuguan.jpg" alt="轮播图" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>

      <!-- 标题 -->
      <h2 class="section-title">特色课程介绍</h2>

      <!-- 特色课程展示 -->
      <el-row :gutter="20" class="courses">
        <el-col :span="6" v-for="course in courses" :key="course.title">
          <el-card shadow="hover">
            <img :src="course.image" alt="课程图" class="course-img" />
            <h3>{{ course.title }}</h3>
            <p>{{ course.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";

const activeIndex = ref("1");

// 课程数据
import softwareImg from "@/assets/software.jpg";
import signalImg from "@/assets/signal.jpg";
import networkImg from "@/assets/network.jpg";
import structureImg from "@/assets/structure.jpg";

const courses = [
  { title: "软件工程", description: "介绍软件开发与工程问题。", image: softwareImg },
  { title: "数字信号处理", description: "数字信号的变换与滤波。", image: signalImg },
  { title: "计算机网络", description: "通信协议与网络系统。", image: networkImg },
  { title: "数据结构", description: "数据的存储结构与操作。", image: structureImg },
];
</script>

<style scoped>


.nav-menu {
  flex: 1;
}

.el-menu-item {
  padding: 0 20px;
  color: #ffffff;
}

.el-menu-item:hover {
  background-color: #409EFF;
  color: #ffffff;
}

/* 确保父级元素 position 设置为 relative */
.el-header {
  position: relative; /* 使下拉菜单的 z-index 正常生效 */
}


/* 下拉菜单样式 */
.el-submenu .el-menu {
  display: none; /* 默认隐藏下拉菜单 */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 4px;
  z-index: 1051; /* 提高优先级，确保覆盖轮播图 */
}

/* 鼠标悬停时显示下拉菜单 */
.el-submenu:hover .el-menu {
  display: block;
}


/* 轮播图样式 */
.carousel {
  position: relative;
  z-index: 0; /* 确保轮播图不会盖住导航栏下拉框 */
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-icon {
  color: #ffffff;
  font-size: 20px;
}

.login-button {
  color: #ffffff;
  font-size: 16px;
}

.section-title {
  margin: 30px 0 20px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.courses {
  margin-top: 30px;
}

.course-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填满容器并裁剪多余部分 */
  border-radius: 8px; /* 可选，给图片加圆角 */
}
</style>
